<template>
  <div class="integralRules">
    <hd titles="积分规则"></hd>
    <div class="rulesCard">
      <h3>购物</h3>
      <ul>
        <li v-for="item in types.a">
          {{item.rulesCon}}
        </li>
      </ul>
    </div>
    <div class="rulesCard">
      <h3>签到</h3>
      <ul>
        <li v-for="item in types.b">
          {{item.rulesCon}}
        </li>
      </ul>
    </div>
    <ftr></ftr>
  </div>
</template>

<script>
  import hd from "../../public/hd";
  import ftr from "../../public/ftr";

  export default {
    name: "integralRules",
    components:{
      'hd':hd,
      'ftr':ftr
    },
    data() {
      return {
        rules: [{
          id: 1,
          rulesTit: '购物',
          rulesCon: '购买商品可获得积分'
        }, {
          id: 2,
          rulesTit: '签到',
          rulesCon: '每日签到可获得签到'
        }, {
          id: 3,
          rulesTit: '签到',
          rulesCon: '每日签到可获得签到'
        }],
        types: ''
      }
    },
    created() {
      this.types = this.showRules(this.rules);
    },
    methods: {
      showRules(rules) {
        let rules1 = [], rules2 = [];
        for (let i = 0; i < rules.length; i++) {
          if (rules[i].rulesTit === "购物") {
            rules1.push(rules[i]);
          } else if (rules[i].rulesTit === "签到") {
            rules2.push(rules[i]);
          }
        }
        return {
          a: rules1,
          b: rules2
        };
      }
    }
  }
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }

  .clear::before,
  .clear::after {
    display: table;
    content: '';
  }

  .clear::after {
    clear: both;
  }

  .integralRules{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: #ffce80;
  }

  .rulesCard {
    text-align: left;
    padding: 0 2%;
    font-size: 16px;
    background-color: #fff;
    margin-bottom: 20px;
  }

  .rulesCard > h3 {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    border-bottom: 1px solid #d5d5d5;
  }

  li {
    height: 40px;
    line-height: 40px;
    list-style-type: disc;
  }
</style>
